<template>
  <view class="comment-content">
    <view class="information-title">
      <img src="@/static/img/pay/line.png" alt="" />
      <text>患者评价</text>
    </view>
    <!-- <scroll-view scroll-y="true" style="height: 550rpx"> -->
    <view v-if="commentList.length > 0">
      <view class="comments-row" v-for="(item, index) in commentList" :key="index">
        <view class="comments-peo">
          <!-- <img src="@/static/img/sportPurpose/three.png" alt="" class="header-img" /> -->
          <image :src="item.member.face" alt="" class="header-img"></image>
          <view class="name-date">
            <text class="name">{{ item.member.nickName || '--' }}</text>
            <text class="date">{{ item.userEvaluateTime.slice(0, 10) }}</text>
          </view>
          <view class="evaluation">
            <text>{{ item.grade.toFixed(2) }}</text>
            <u-rate :current="5" :disabled="true" active-color="#faad39"></u-rate>
          </view>
        </view>
        <view class="comments-text">
          <text>{{ item.userEvaluate }}</text>
        </view>
        <view class="comments-replay" v-if="item.expertReply">
          <view class="replay-text"
            ><text class="replay-title">专家回复：</text><text>{{ item.expertReply || '--' }}</text></view
          >
          <view class="replay-time">
            {{ item.expertReplyTime.slice(0, 10) || '--' }}
          </view>
        </view>
      </view>
    </view>
    <view class="nocomment" v-else> 暂无评价 </view>
    <!-- </scroll-view> -->
    <!-- <view class="commets-input2">
      <u-input v-model="commentsVal" :auto-height="true" maxlength="390" :clearable="false" class="text" type="textarea" placeholder="快来说说学习感受..." />
      <view class="subcomment2" @tap="subcomment">发布评论</view>
    </view> -->
  </view>
</template>

<script>
export default {
  name: 'comment',
  props: {
    commentList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      //mock数据
      // isBuy: true, //是否需要购买
      // isFree: false, //是否免费
      // price: 99.99, //价格
      //推荐数据
      recommended: [
        {
          id: 1
        },
        {
          id: 2
        },
        {
          id: 3
        },
        {
          id: 4
        }
      ],
      comments: [{}, {}, {}, {}, {}],

      //评论分数，添加图片评论
      commentsImg: {
        selected: '../../static/img/courseBuy/collect2.png',
        slecet: '../../static/img/courseBuy/collect3.png',
        current: 4,
        src: []
      }
    }
  },
  created() {
    console.log('评论列表', this.commentList)
  },
  methods: {
    // 跳转到全部回复
    toAllReply() {
      uni.navigateTo({
        url: '/pages/template/comment/reply'
      })
    },
    // 点赞
    getLike(index) {
      this.commentList[index].isLike = !this.commentList[index].isLike
      if (this.commentList[index].isLike == true) {
        this.commentList[index].likeNum++
      } else {
        this.commentList[index].likeNum--
      }
    },
    // 评论列表
    // getComment() {
    // 	this.commentList = [{
    // 			id: 1,
    // 			name: '叶轻眉',
    // 			date: '12-25 18:58',
    // 			contentText: '我不信伊朗会没有后续反应，美国肯定会为今天的事情付出代价的',
    // 			url: 'https://cdn.uviewui.com/uview/template/SmilingDog.jpg',
    // 			allReply: 12,
    // 			likeNum: 33,
    // 			isLike: false,
    // 			replyList: [{
    // 					name: 'uview',
    // 					contentStr: 'uview是基于uniapp的一个UI框架，代码优美简洁，宇宙超级无敌彩虹旋转好用，用它！'
    // 				},
    // 				{
    // 					name: '粘粘',
    // 					contentStr: '今天吃什么，明天吃什么，晚上吃什么，我只是一只小猫咪为什么要烦恼这么多'
    // 				}
    // 			]
    // 		},
    // 		{
    // 			id: 2,
    // 			name: '叶轻眉1',
    // 			date: '01-25 13:58',
    // 			contentText: '我不信伊朗会没有后续反应，美国肯定会为今天的事情付出代价的',
    // 			allReply: 0,
    // 			likeNum: 11,
    // 			isLike: false,
    // 			url: 'https://cdn.uviewui.com/uview/template/niannian.jpg',
    // 		},
    // 		{
    // 			id: 3,
    // 			name: '叶轻眉2',
    // 			date: '03-25 13:58',
    // 			contentText: '我不信伊朗会没有后续反应，美国肯定会为今天的事情付出代价的',
    // 			allReply: 0,
    // 			likeNum: 21,
    // 			isLike: false,
    // 			allReply: 2,
    // 			url: '../../../static/logo.png',
    // 			replyList: [{
    // 					name: 'uview',
    // 					contentStr: 'uview是基于uniapp的一个UI框架，代码优美简洁，宇宙超级无敌彩虹旋转好用，用它！'
    // 				},
    // 				{
    // 					name: '豆包',
    // 					contentStr: '想吃冰糖葫芦粘豆包，但没钱5555.........'
    // 				}
    // 			]
    // 		},
    // 		{
    // 			id: 4,
    // 			name: '叶轻眉3',
    // 			date: '06-20 13:58',
    // 			contentText: '我不信伊朗会没有后续反应，美国肯定会为今天的事情付出代价的',
    // 			url: 'https://cdn.uviewui.com/uview/template/SmilingDog.jpg',
    // 			allReply: 0,
    // 			likeNum: 150,
    // 			isLike: false
    // 		}
    // 	];
    // },
    //评论分数的显示
    choose(num) {
      if (num) {
        this.commentsImg.current = num
      }
      if (this.commentsImg.current == 1) {
        return '一'
      } else if (this.commentsImg.current == 2) {
        return '二'
      } else if (this.commentsImg.current == 3) {
        return '三'
      } else if (this.commentsImg.current == 4) {
        return '四'
      } else if (this.commentsImg.current == 5) {
        return '五'
      }
    },
    //删除评论图片
    delImg(index) {
      this.commentsImg.src.splice(index, 1)
    },
    //评论回复
    commentsApply() {
      this.applyShow = true
    },
    //关闭评论回复
    applyClose() {
      this.applyShow = false
    }
  }
}
</script>

<style lang="scss" scoped>
@import './comment.scss';

.comment-content {
  background: #ffffff;
  border-radius: 14rpx;
  padding: 40rpx 24rpx 0;
}
.commets-input2 {
  width: 100%;
  height: 200rpx;
  //   .text {
  //     padding: 10rpx;
  //     //   width: 100%;
  //     border: 1px solid #ccc;
  //   }
  .subcomment2 {
    background-color: #ff5663;
    position: absolute;
    padding: 20rpx;
    color: #fff;
    right: 50rpx;
    border-radius: 4rpx;
    margin-top: 10rpx;
  }
}
</style>
